<template>
  <div class="hello">
    <div class="hi-top">
      <a href="">
        <img src="/static/1.jpg" alt="">
      </a>
    </div>
    <div class="hi-main row">
      <ul class="hm-left visible-lg col-lg-12 col-md-10">
        <li>
          <!-- --------------game详情------------------- -->
          <a href="#/game">
            <div>
              <p style="margin-top:10px;">
                <img style="margin-left:15px;width:30px;height:30px;" src="" alt="">
                <span style="color:#bebebe">xxx的推荐</span>
              </p>
              <h3 style="color:black;margin-left:15px;margin-top:0px;">
                猫咪花盆
              </h3>
              <img style="width:100%" src="/static/2.jpg" alt="">
              <p style="font-size:18px;color:gray;margin-left:15px;margin-top:10px;">
                我家的小猫很可爱的！
              </p>
            </div>
          </a>
        </li>
        <li>
          <swiper auto height="100px">
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              它无孔不入
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              你无处可藏
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              不是它可恶
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              而是它不懂你
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              我们试图
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              做些改变
              </h2>
            </swiper-item>
          </swiper>
        </li>
        <li>
          <!-- --------------game详情------------------- -->
          <a href="#/game">
            <div>
              <p style="margin-top:10px;">
                <img style="margin-left:15px;width:30px;height:30px;" src="" alt="">
                <span style="color:#bebebe">xxx的推荐</span>
              </p>
              <h3 style="color:black;margin-left:15px;margin-top:0px;">
                猫咪花盆
              </h3>
              <img style="width:100%" src="/static/2.jpg" alt="">
              <p style="font-size:18px;color:gray;margin-left:15px;margin-top:10px;">
                我家的小猫很可爱的！
              </p>
            </div>
          </a>
        </li>
      </ul>
      <ul class="hm-lefts visible-sm visible-xs col-lg-12 col-md-10" style="width:100%">
        <li>
          <swiper auto height="100px">
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              它无孔不入
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              你无处可藏
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              不是它可恶
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              而是它不懂你
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              我们试图
              </h2>
            </swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">
              做些改变
              </h2>
            </swiper-item>
          </swiper>
        </li>
        <li  @click="chuanzhi" v-for="( item ,index) in games">
          <!-- --------------game详情------------------- -->
          <a :href="'#/game/'+item.gameid" :name="item.gameid">
            <div>
              <p style="margin-top:10px;">
                <img style="margin-left:15px;width:30px;height:30px;" src="" alt="">
                <span style="color:#bebebe">{{item.gameer}}</span>
              </p>
              <h3 style="color:black;margin-left:15px;margin-top:0px;">
                {{item.gamename}}
              </h3>
              <img style="width:100%" :src="'http://192.168.13.196:2200/images/'+item.gameer_bimg[0]" alt="">
              <p style="font-size:18px;color:gray;margin-left:15px;margin-top:10px;">
                {{jianjie[item.index]}}...
              </p>
            </div>
          </a>
        </li>
        
      </ul>
      <ul class="hm-right row">
        <div class="ids visible-lg  col-lg-12 col-md-10">
          <img style="width:30%;padding:15px 5px;float:left" src="/static/3.png" alt="">
          <div class="top-tops" style="width:69%;float:left;padding:15px 0">
             <img style="width:35%;background:#12a7b4;padding:2px 0;" src="/static/logo.png" alt="">
             <span style="color:#12a7b4;font-size:20px;font-weight:900;line-height:30px">发 现 好 游 戏</span>
             <p style="font-size:16px;color:#bebebe;padding:5px 0">欢迎关注我</p>
             <p class="iss">
               <i title="微信" class="fa fa-meetup"></i>
               <i title="运动" class="fa fa-grav"></i>
               <i title="好友" class="fa fa-drivers-license"></i>
               <i title="同住地球村" class="fa fa-ravelry"></i>
               <i title="火，火，火" class="fa fa-free-code-camp"></i>
             </p>
          </div>
        </div>
         <h2 class="visible-lg" style="margin-left:15px;">| 排行榜</h2>
         <div class="top-one visible-lg ">
           <ul>
             <li>
               <a href="">
                 <img src="/static/3.png" alt="">
                 <span>123</span><br>
                 <span>54564546546</span>
               </a>
             </li>
             
             <li class="top-aside">
               <a style="background: #12a7b4;padding:2px" href=""> -HOT</a>
               <a style="background: #12a7b4;padding:2px;margin-top:5px;" href=""> -CN</a>
             </li>
           </ul>
         </div>
      </ul>
    </div>
    <!-- <p>{{tupian}}</p> -->
  </div>
</template>

<script>
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from "vux";
export default {
  data() {
    return {
      user: [],
      games: [],
      tupian: [],
      jianjie: []
    };
  },
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider
  },
  mounted: function() {
    var that = this;
    this.$axios
      .get("/top/allgames")
      .then(function(data) {
        // console.log(data.data.data);
        var games = data.data.data;
        that.games = games;
        for (var i = 0; i < games.length; i++) {
          // console.log(that.games[i].gameer_img)
          that.tupian.push("/static/" + games[i].gameer_img);
          that.jianjie.push(games[i].gamemotto.substring(0, 15));
          that.games[i].index = i;
        }
      })
      .catch(function(err) {
        console.log(err);
      });
    var page = 0;
    // console.log($);
    $(document).on("scroll", window, function() {
      // console.log('132')
      var height = $(document).height();
      var screenHeight = $(window).height();
      var scrollTop = $(window).scrollTop();
      if (scrollTop + screenHeight > height - 5) {
        page += 1;
        // console.log(page);
        that.$axios
          .get("/top/allgames?pages=" + page)
          .then(data => {
            // console.log(data.data);
            var games = data.data.data;
            games.forEach(function(games) {
              that.games.push(games);
            });
            for (var i = 0; i < games.length; i++) {
              // console.log(that.games[i].gameer_img)
              that.tupian.push("/static/" + games[i].gameer_img);
              that.jianjie.push(games[i].gamemotto.substring(0, 10));
              that.games[i].index = i;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    });
  },
  methods: {
    chuanzhi: function() {}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .top-tops .iss i:first-child{
  male
} */
.top-one ul li a span {
  margin-left: 15px;
  font-size: 20px;
  color: black;
}
.top-one ul li a img {
  width: 15%;
  float: left;
}
.top-one ul li a {
  overflow: hidden;
  display: block;
}
.top-one ul .top-aside {
  width: 10%;
  background: #ccc;
  height: 970px;
  padding: 0 0;
  position: absolute;
  right: 0;
}
.top-one ul li {
  padding: 15px 15px;
  /* border: solid 1px #aaa; */
  width: 90%;
  float: left;
}
.top-one ul {
  padding: 0 0;
  overflow: hidden;
  position: relative;
}
.top-one {
  box-shadow: -1px -1px 5px #aaa;
  margin: 15px 16px;
}
.top-tops .iss i {
  margin-right: 10px;
  background: #12a7b4;
  padding: 8px 7px;
  border-radius: 50%;
}
.hm-right ids h1 {
  border-bottom: solid 1px black;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.title {
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.black {
  background-color: #000;
}

.hm-left li {
  box-shadow: -1px -1px 5px #aaa;
  padding-top: 10px;
  margin-top: 15px;
}
.hm-lefts li {
  box-shadow: -1px -1px 5px #aaa;
  padding-top: 10px;
  margin-top: 15px;
}
.hm-lefts {
  width: 100%;
  float: left;
  height: 100%;
  padding: 0 0;
}
.hm-left {
  width: 64%;
  float: left;
  height: 100%;
  padding: 0 0;
}
.hm-right {
  width: 34%;
  height: 500px;
  float: left;
  margin-left: 20px;
  height: 100%;
  margin-top: 15px;
  box-shadow: -1px -1px 5px #aaa;
  padding: 0 0;
}
.hi-main {
  width: 100%;
  /* border: solid 1px black; */
  margin: 0 auto;
  overflow: hidden;
}
.hi-top a img {
  width: 100%;
  margin-top: 15px;
}
.hello {
  width: 95%;
  /* border: solid 1px black; */
  margin: 75px auto;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
  text-shadow: -1px 1px yellow
}
</style>
